<template>
<div class="guide">
	<div class="bg" @click="base.guideIndex == 6 ? close() :  getGuide(1)"></div>
    <div :class="`guideCon ${baseclass}`" 
		:style="`${style}`"
	>
		<span class="close" @click="close"></span>
		<span class="count"><a>{{ base.guideIndex }}</a>/6</span>
		<span class="tit-1 show" v-if="base.guideIndex == 1">
			在这里可选择推荐问题<br/>
			或输入想咨询的内容
		</span>
		<span class="tit-2 show" v-if="base.guideIndex == 1">点击图标，WIRE AI快速帮你解答</span>
		<span class="tit-1 show" v-if="base.guideIndex == 2">
			在这里可新建对话窗口
		</span>
		<span class="tit-1 show" v-if="base.guideIndex == 3">
			在这里可快速搜索历史问题
		</span>
		<span class="tit-1 show" v-if="base.guideIndex == 4">
			在这里可对历史问题进行编辑
		</span>
		<span class="tit-2 show" v-if="base.guideIndex == 4">你可以点击相应按钮对问题置顶/修改/删除</span>
		<span class="tit-1 show" v-if="base.guideIndex == 5">
			这里是参与内容反馈获得的积分
		</span>
		<span class="tit-2 show" v-if="base.guideIndex == 5">你可以用积分去兑换相应礼品或权益</span>
		<span class="tit-1 show" v-if="base.guideIndex == 6">
			在这里可对内容进行反馈<br/>
			且获得积分 
		</span>
		<span class="tit-2 show" v-if="base.guideIndex == 6">
			你可选择问题类型并点击【其他】输入建议 <br/>
			也可上传文件或者图片进行反馈
		</span>
		<div class="cont">
			<img class="iconbg" :src="`${imgurl}guidebg.png`"/>
			<img class="icon" :src="`${imgurl}guide.gif`"/>
			<img v-if="base.guideIndex == 1" class="img" :src="`${imgurl}guide01.png`"/>
			<img v-if="base.guideIndex == 2" :src="`${imgurl}guide02.png`"/>
			<img v-if="base.guideIndex == 3" :src="`${imgurl}guide03.png`"/>
			<img v-if="base.guideIndex == 4" :src="`${imgurl}guide04.png`"/>
			<img v-if="base.guideIndex == 5" :src="`${imgurl}guide05.png`"/>
			<img v-if="base.guideIndex == 6" :src="`${imgurl}guide06.png`"/>
		</div>
		<div class="btnpage">
			<img class="btnPrev" v-if="base.guideIndex > 1" @click="getGuide(0)" :src="`${imgurl}guide_right.png`"/>
			<img class="btnNext" v-if="base.guideIndex < 6" @click="getGuide(1)" :src="`${imgurl}guide_left.png`"/>
			<span class="nextBtn" v-if="base.guideIndex == 6" @click="close">知道了</span>
		</div>
		<span class="triangle"></span>
		<span class="line1" v-if="base.guideIndex == 1"></span>
		<span class="line2" v-if="base.guideIndex == 1"></span>
		<span class="line3"></span>
    </div>
</div>

</template>

<script setup lang='ts'>
	const imgurl = import.meta.env.VITE_APP_TITLE+'/assets/images/';
	import { useUserStore } from "@/store/modules/user";
	import { useSystemStore } from "@/store/modules/system";
	const api = inject('$base', null as any);
	const useStore = useUserStore();
	const base = useSystemStore();
	const baseclass = ref<string>('');
	const style = ref<string>();
	function getLeft(x:number){
		if(base.guideIndex == 1){
			return x;
		}
	}
	function getTop(y:number){
		if(base.guideIndex == 1){
			return y - 435;
		}
	}
	function getGuide(type:number){
		if(type == 0){
			base.guideIndex--;
		}else{
			base.guideIndex++;
		}
		baseclass.value = `guide${base.guideIndex}`;
		if(base.guideIndex == 2){
			style.value = `left:220px;top:58px`;
		}else if(base.guideIndex == 3){
			style.value = `left:360px;top:120px;`;
		}else if(base.guideIndex == 4){
			style.value = `left:360px;top:190px;`;
		}else if(base.guideIndex == 5){
			style.value = `left:360px;bottom:40px;`;
		}else if(base.guideIndex == 6){
			const width = window.innerWidth;
			const left = width - (width - 280 - 780)/2 - 515;
			style.value = `left:${left}px;top:250px;`;
		}else{
			style.value = `left:${getLeft(base.guideLeft)}px;top:${getTop(base.guideTop)}px;`;
		}
		
		if(base.guideIndex == 5){
			base.isActivefeed = true;
		}else{
			base.isActivefeed = false;
		}
	}
	function close(){
		base.isShowGuide = false;
		base.guideIndex = 0;
		api.updatehelpstatus({id:useStore.userIds}).then(res=>{
			
		})
	}
	onMounted(()=>{
		base.guideIndex = 1;
		style.value = `left:${getLeft(base.guideLeft)}px;top:${getTop(base.guideTop)}px;`;
	})
</script>
<style lang="scss" scoped>
    .guide{
        background:rgba(0,0,0,.5);
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        z-index:110;
		.bg{
			position:absolute;
			left:0;
			top:0;
			width:100%;
			height:100%;
		}
    }
    .guideCon{
        background:#4a90f5;
        position:absolute;
        width:290px;
        height:auto;
        border-radius:10px;
		padding: 10px 0 45px 0;
		font-family: 'siyuanR';
		z-index:10;
		.close{
			background:url(../../assets/images/icon_close.png) no-repeat;
        	background-size:100% auto;
			width:20px;
			height:20px;
			position:absolute;
			right:-20px;
			top:-20px;
			cursor: pointer;
		}
		.count{
			position: absolute;
			right: 15px;
			top:15px;
			color:rgba(252,253,254,.8);
			font-size: 13px;
			a{
				color: #66e6b1;
			}
		}
		.tit-1{
			font-size: 16px;
			padding: 0 24px;
			line-height: 24px;
			font-family: 'siyuanM';
			position: relative;
			color: #fcfdfe;
			&::before{
				position: absolute;
				left: 17px;
				content: '';
				top:5px;
				width: 2px;
				height:14px;
				background:#fff;
			}
		}
		.tit-2{
			font-size: 13px;
			padding: 5px 24px;
			line-height: 20px;
			padding: 0 17px;
			margin-top: 5px;
			color:rgba(252,253,254,.8);
		}
		.cont{
			padding: 0 15px;
			position: relative;
			margin-top: 20px;
			
			.icon{
				position: absolute;
				left: 10px;
				top:-20px;
				width: 55px;
				height: 55px;
				z-index: 88;
			}
			.iconbg{
				position: absolute;
				left:10px;
				top:-20px;
				display: block;
				width: 55px;
				height: 55px;
			}
			.img{
				width: 100%;
				height: auto;
				box-shadow:1px 3px 6px rgba(24,69,135,.24);
			}
		}
		.btnpage{
			width: 100%;
			padding: 0 15px;
			position: absolute;
			bottom: 15px;
			display: flex;
			justify-content: flex-end;
			.nextBtn{
				background: #ffffff;
				height: 22px;
				font-size: 14px;
				color: #4a90f5;
				border-radius: 20px;
				padding:0 12px;
				margin-left: 15px;
				cursor: pointer;
				box-shadow:1px 3px 6px rgba(24,69,135,.24);
			}
		}
		.btnPrev,
		.btnNext{
			width: 22px;
			height: 22px;
			margin-left: 15px;
			cursor: pointer;
		}
		.triangle {
			width: 0;
			height: 0;
			border-top: 10px solid transparent; 
			border-bottom: 10px solid transparent;
			border-right: 15px solid #4a90f5; 
			position: absolute;
			bottom: 55px;
			left: -10px;
		}
		.line1{
			background: #4a90f5;
			height: 2px;
			width: 45px;
			position: absolute;
			bottom: 64px;
			left: -45px;
		}
		.line2{
			height: 337px;
			width: 2px;
			position: absolute;
			top: 160px;
			left: -45px;
			background-image: linear-gradient(to bottom, #4a90f5, #5597f6);
		}
		.line3{
			height: 2px;
			width:45px;
			position: absolute;
			top:495px;
			left: -45px;
			background-image: linear-gradient(to right, #4a90f5, #fcfdfe);
		}
		&.guide2{
			.line3{
				top: 45px;
				width: 85px;
				left: -85px;
				background-image: linear-gradient(to left, #4a90f5, #fcfdfe);
			}
			.triangle {
				top: 36px;
				z-index: 99;
			}
		}
		&.guide3{
			.line3{
				top: 50px;
				width: 85px;
				left: -85px;
				background-image: linear-gradient(to left, #4a90f5, #fcfdfe);
			}
			.triangle {
				top: 41px;
				z-index: 99;
			}
		}
		&.guide4{
			.line3{
				top: 45px;
				width: 85px;
				left: -85px;
				background-image: linear-gradient(to left, #4a90f5, #fcfdfe);
			}
			.triangle {
				top: 36px;
				z-index: 99;
			}
		}
		&.guide5{
			.line3{
				top: 45px;
				width: 85px;
				left: -85px;
				background-image: linear-gradient(to left, #4a90f5, #fcfdfe);
			}
			.triangle {
				top: 36px;
				z-index: 99;
			}
		}
		&.guide6{
			.line3{
				top: 240px;
				width: 85px;
				left: 290px;
				background-image: linear-gradient(to right, #4a90f5, #fcfdfe);
				
			}
			.triangle {
				z-index: 99;
				border-right: 0;
				border-left: 15px solid #4a90f5; 
				left: 290px;
				top:230px;
			}
		}
    }
</style>